<template>
  <!-- 初始化地图 -->
  <div id="map"></div>
</template>

<script setup>
import { onMounted } from "vue"
import { gaodeVector, gaodeImage } from "../../../../map_libs/TDmap"
//导入原型
import { prototype } from "../../../../main" //重要
onMounted(() => {
  const map = new ol.Map({
    target: "map",
    layers: [gaodeImage, gaodeVector],
    view: new ol.View({
      projection: "EPSG:4326",
      center: [114.38, 30.5],
      zoom: 5,
    }),
  })
  setTimeout(() => {
    const view = map.getView()
    view.animate({
      center: [114.38, 30.5],
      zoom: 12,
      duration: 1000,
    })
  }, 100)
  // 组件中设置原型属性的值
  prototype.$map = map //重要
})
</script>

<style scoped>
#map {
  position: absolute;
  /* top: 50px; */
  /* bottom: 0; */
  /* z-index: 100; */
  width: 100%;
  height: 100%;
}
</style>
